<template>
  <div
      class="img-review-wrapper"
      v-show="imgReviewVisible"
      @click.self="closeImgReview"
      @mousewheel.prevent="rollImg()"
  >
    <!-- 顶部信息栏 & 工具栏 -->
    <div class="tip-wrapper" v-if="imgReviewVisible">    
      <div class="name" :title="activeFileName + activeExtendName">{{ activeFileName }}.{{ activeExtendName }}</div>
      
      <!--
      <div class="opera-btn-group">
        <el-input-number v-model="inputActiveIndex" :min="1" :max="imgReviewList.length" size="mini"></el-input-number>
        <span class="split-line">/</span>{{ imgReviewList.length }}
      </div>
      -->
      
      <div class="tool-wrapper">
      
      <!--
        <i class="item el-icon-refresh-right" title="向右旋转" @click="rotateImg"></i>
        <i class="item el-icon-refresh-right el-icon-s-custom" title="设为头像" @click="setHeadImg"></i>
      -->
      
        <a
            class="item download-link"
            target="_blank"
            :href="activeDownloadLink"
            :download="activeFileName + '.' + activeExtendName"
        >
          <i class="el-icon-download" title="保存到本地"></i>
        </a>
        <el-tooltip effect="dark" placement="bottom">
          <div slot="content">
            操作提示：<br/>
            双击鼠标可退出查看；<br/>
            鼠标滚轮可放大缩小图片
          </div>
          <div class="item text-wrapper">
            <span class="text">操作提示</span>
            <i class="el-icon-question"></i>
          </div>
        </el-tooltip>
      </div>
    </div>
    <!-- 大图查看 -->
    <img
    	id="imgLargeId"
        class="img-large"        
        v-for="(item, index) in imgReviewList"
        :key="index"
        :src="item.fileUrl"
        v-show="index === activeIndex"
    />
    <!-- 左右切换图标 -->    
    <i class="pre-icon el-icon-arrow-left" title="上一张" v-show="activeIndex > 0" @click.stop="activeIndex--"></i>
    <i
        class="next-icon el-icon-arrow-right"
        title="下一张"
        v-show="activeIndex < imgReviewList.length - 1"
        @click.stop="activeIndex++"
    ></i>
    
    <!-- 底部显示放大缩小比例 -->
    <div class="zoom-bar">
      <el-slider
          v-model="imgZoom"
          :min="imgZoomMin"
          :max="imgZoomMax"
          :format-tooltip="formatZoom"
          @input="changeZoom"
      ></el-slider>
      <div class="zoom-count">{{ imgZoom }}%</div>
    </div>
  </div>
</template>

<script>
import {setAvatar} from "/@/request/user.js";
import { ElMessage } from 'element-plus';
import { nextTick, computed, watch, toRefs, reactive, getCurrentInstance } from 'vue'
import { useStore } from '/@/store/index';

export default {
  name: 'ImgReview',
  setup(){
  	const store=useStore();
  	const { proxy } = getCurrentInstance();
  	
  	const state=reactive({
      rotate: 0, //  旋转角度
      activeIndex: 0, //  当前图片索引 从 0 开始
      imgZoom: 40, //  图片缩放比例
      imgZoomMin: 1, //  图片缩放最小比例
      imgZoomMax: 200 //  图片缩放最大比例
    });


	// 图片查看组件是否显示
	const imgReviewVisible = computed(()=>{
		return store.state.wangpanImgReview.imgReviewVisible
	});

	// 图片列表
    const imgReviewList = computed(()=>{
		return store.state.wangpanImgReview.imgReviewList
	});

	// 默认显示的图片索引 从 0 开始
    const defaultActiveIndex = computed(()=>{
		return store.state.wangpanImgReview.defaultActiveIndex
	});

	// 当前显示的图片名称
	const activeFileName = computed(()=>{
		return imgReviewList.value[state.activeIndex].filename
	});

	// 当前显示的图片扩展名
    const activeExtendName= computed(()=>{
      return imgReviewList.value[state.activeIndex].extension
    });
    
    const activeFileId= computed(()=>{
      return imgReviewList.value[state.activeIndex].id
    });

    // 对用户而言 显示的图片索引 从 1 开始 顶部栏输入框控制此值变化
    const inputActiveIndex = computed({
      get: () => {
        return state.activeIndex + 1
      },
      set: (value) => {
        state.activeIndex= value - 1
      }
    });
   
    // 当前显示的图片下载链接
    const activeDownloadLink=computed(()=>{
      return imgReviewList.value[state.activeIndex].downloadLink;
    });
    
    
	// 监听 图片查看组件 显隐状态变化
    watch(()=>imgReviewVisible.value,val=>{
      let body = document.querySelector('body')
      if (val) {
        state.activeIndex = defaultActiveIndex.value
        // 挂在body下，防止组件元素有样式transform而使position: fixed失效
        body.appendChild(proxy.$el)
        body.style.overflow = 'hidden'
        // 添加键盘Esc事件
        nextTick(() => {
          document.addEventListener('dblclick', (e) => {
            //if (e.keyCode === 27) {
              closeImgReview()
            //}
          })
        })
        nextTick(() => {
          let el = document.getElementById('imgLargeId');
          el.style.zoom = '40%'
        })
      } else {
        body.style.overflow = 'auto'
        document.removeEventListener('keyup', (e) => {
          if (e.keyCode === 27) {
            closeImgReview()
          }
        })
      }
    });

    // 监听 图片索引变化
    watch(()=>state.activeIndex,(newValue)=> {
      state.rotate = 0
      nextTick(() => {
      	let el = document.getElementById('imgLargeId');
        if (el.style.zoom) {
          state.imgZoom = Number(el.style.zoom.split('%')[0])
        } else {
          el.style.zoom = '40%'
          state.imgZoom = 40
        }
      })
    });

    //  关闭图片预览
    const closeImgReview = ()=> {
      let el = document.getElementById('imgLargeId');
      if (el){
      store.commit('wangpanImgReview/setImgReviewData', {imgReviewVisible: false})
      state.rotate = 0
      el.style.transform = `rotate(${state.rotate}deg)`
      }
    };
    // 格式化缩放数字 显示图片缩放比例
    const formatZoom = (value)=> {
      return value + '%'
    };
    // 图片缩放改变事件
    const changeZoom = (value)=> {
      let el = document.getElementById('imgLargeId');      
      el.style.zoom = value + '%'
    };
    // 缩放图片
    const rollImg = () =>{
      let el = document.getElementById('imgLargeId');
      let zoom = parseInt(el.style.zoom) || 100
      zoom += event.wheelDelta / 12
      if (zoom >= state.imgZoomMin && zoom < state.imgZoomMax) {
        state.imgZoom = zoom
        el.style.zoom = zoom + '%'
      }
      return false
    };
    //  旋转图片
    const rotateImg=()=> {
      let el = document.getElementById('imgLargeId');
      state.rotate += 90
      el.style.transform = `rotate(${state.rotate}deg)`
    };
    const setHeadImg = ()=> {
      let data = {
        fileId: activeFileId.value
      }
      setAvatar(data).then(
          ElMessage({
            message: '头像设置成功, 刷新页面即可生效',
            type: 'success'
          })
      ).catch(err=> {
        console.error(err)
        ElMessage.error("头像设置失败，请稍后再试！")
      })
    };

    return{
    	...toRefs(state),
    	imgReviewList,
    	imgReviewVisible,
    	formatZoom,
    	changeZoom,
    	activeFileName,
    	activeExtendName,
    	inputActiveIndex,
    	activeDownloadLink,
    	rollImg,
    };
    
  },
}
</script>

<style lang="stylus" scoped>
@import '../styles/varibles.styl'

.img-review-wrapper
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  overflow auto
  width 100%
  height 100%
  z-index 2010
  text-align center
  display flex
  align-items center
  animation imgReviewAnimation 0.3s
  -webkit-animation imgReviewAnimation 0.3s /* Safari and Chrome */
  animation-iteration-count 0.3
  -webkit-animation-iteration-count 0.3
  animation-fill-mode forwards
  -webkit-animation-fill-mode forwards /* Safari 和 Chrome */
  @keyframes imgReviewAnimation
    0%
      background transparent
    100%
      background rgba(0, 0, 0, 0.8)
  @keyframes imgReviewAnimation
    0%
      background transparent
    100%
      background rgba(0, 0, 0, 0.8)

  .tip-wrapper
    position fixed
    top 0
    left 0
    z-index 2011
    background rgba(0, 0, 0, 0.5)
    padding 0 48px
    width 100%
    height 48px
    line-height 48px
    color #fff
    font-size 16px
    display flex
    justify-content space-between

    .name
      flex 1
      padding-right 16px
      text-align left
      overflow hidden
      text-overflow ellipsis
      white-space nowrap

    .opera-btn-group
      width 100px
      display flex

      :v-deep .el-input-number
        width 40px

        .el-input-number__decrease,
        .el-input-number__increase
          display none

        .el-input__inner
          margin-top 14px
          background rgba(0, 0, 0, 0.5)
          height 20px
          line-height 20px
          padding 0
          font-size 16px
          color #fff

      .split-line
        margin 0 8px

    .tool-wrapper
      flex 1
      display flex
      justify-content flex-end

      .item
        margin-left 16px
        cursor pointer

        &:hover
          opacity 0.7

      .el-icon-refresh-right
        line-height 48px
        font-size 18px

      .download-link
        color inherit
        font-size 18px

      .text-wrapper
        margin-left 32px

        .text
          margin-right 8px

  .img-large
    margin 0 auto
    transition transform 0.5s
    -webkit-transition transform 0.5s

  /* Safari */

  .pre-icon,
  .next-icon
    font-size 60px
    color #fff
    position fixed
    top 50%
    cursor pointer

    &:hover
      opacity 0.7

  .pre-icon
    left 64px

  .next-icon
    right 64px

  .zoom-bar
    position fixed
    right 0
    bottom 20px
    left 0
    margin 0 auto
    width 600px
    display flex

    :v-deep .el-slider
      flex 1

      .el-slider__bar
        background $PrimaryText

      .el-slider__button
        border-color $PrimaryText

    .zoom-count
      width 60px
      height 38px
      line-height 38px
      text-align right
      color #fff
</style>
